<template>
  <div v-if="visible">
    <el-dialog v-el-drag-dialog title="表格设置" class="table-set-dlg" top="10vh" :close-on-press-escape="false" :close-on-click-modal="false" width="640px" append-to-body :visible.sync="visible" @close="closeDialog">
      <div v-if="showSort" class="sort-control-box">        
        <div class="left">
          <span class="title">默认排序字段</span>
          <el-select v-model="sortSelectValue" placeholder="下拉选择默认排序字段" size="mini" popper-class="select-popper">
            <el-option v-for="item in sortSelectOptions" :key="item.field" :label="item.name" :value="item.field" />
          </el-select>
        </div>
        <div class="right">
          <span class="title">默认排序方式</span>
          <el-select v-model="sortMethodValue" placeholder="下拉选择默认排序方式" size="mini" popper-class="select-popper">
            <el-option v-for="item in methodOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </div>
      <div class="sort-control-box">
        <div class="left">
          <span class="title">默认搜索字段</span>
          <el-select v-model="sortSearchValue" placeholder="下拉选择默认搜索字段" size="mini" popper-class="select-popper">
            <el-option v-for="item in selectOptions" :key="item.field" :label="item.name" :value="item.field" />
          </el-select>
        </div>
        <div class="right">
          <el-button v-if="settingId" type="primary" size="mini" @click="clearSettingData">清空表格设置</el-button>
          <el-button type="primary" size="mini" @click="sortUp(tableSetting)">上移</el-button>
          <el-button type="primary" size="mini" @click="sortDown(tableSetting)">下移</el-button>
        </div>
      </div>
      <div class="table-list-box">
        <el-table :data="tableSetting" highlight-current-row :height="288" :row-class-name="tableRowClassName" :header-cell-style="{'background':'#F6F6F6', 'width':'100%', 'font-size':'12px'}" @current-change="getSelect">
          <el-table-column type="index" width="40" />
          <el-table-column label="列标题" width="250">
            <template slot-scope="scope">
              <el-input v-model="scope.row.label" size="mini" maxlength="30" placeholder="请输入列标题" readonly class="readonly-input" />
            </template>
          </el-table-column>
          <el-table-column label="列宽(px)" width="100">
            <template slot-scope="scope">
              <el-input v-model="scope.row.width" size="mini" min="0" max="999" type="number" placeholder="请输入列宽" @blur="tableWidthVal($event)" />
            </template>
          </el-table-column>
          <el-table-column label="列冻结" width="100" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.fixed" />
            </template>
          </el-table-column>
          <el-table-column label="是否隐藏" align="center">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.hidden" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-button size="mini" @click="closeDialog">取消</el-button>
        <el-button type="primary" size="mini" @click="alterSet">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { saveTableConfig, addTableConfig ,deletTableConfig} from '../apis/table.data.js'
import { typeOf } from '../lnk-combinefilter/utils';
import drag from '../../../directives/el-drag-dialog/drag'
export default {
  directives:{
    'el-drag-dialog':drag
  },
  props: {
    show: {
      type: Boolean,
      default() {
        return false
      }
    },
    showSort: {
      type: Boolean,
      default() {
        return true
      }
    },
    settingId: {
      type: String,
      default() {
        return ''
      }
    },
    sortField: {
      type: String,
      default() {
        return ''
      }
    },
    sortMethod: {
      type: String,
      default: 'descending'
    },
    sortSearch: {
      type: String,
      default: ''
    },
    tabIndex: {
      type: [String,Number],
      default() {
        return 0
      }
    },
    tableSetting: {
      type: Array,
      default() {
        return []
      }
    },
    selectOptions: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      methodOptions: [
        {
          value: 'ascending',
          label: '升序'
        },
        {
          value: 'descending',
          label: '降序'
        }
      ],
      showCombFilter: true,
      visible: this.show,
      selectIndex: false,
      sortMethodValue: this.sortMethod,
      sortSearchValue: '',
      sortSelectValue: ''
    }
  },
  computed:{
    sortSelectOptions(){
      return this.selectOptions.filter(v=>v.sort!==false)
    }
  },
  watch: {
    show: {
      handler: function(val) {
        this.visible = Boolean(val)
      }
    },
    sortField: {
      handler: function(val) {
        this.sortSelectValue = val
      },
      immediate:true
    },
    sortMethod: {
      handler: function(val) {
        this.sortMethodValue = val
      }
    },
    sortSearch: {
      handler: function(val) {
        this.sortSearchValue = val
      },
      immediate:true
    }
  },
  methods: {
    closeDialog() {
      this.$nextTick(() => {
        this.$emit('update:show', false)
      })
    },
    // 列宽不能为负
    tableWidthVal(e) {
      if(e.target.value !==''){
        if(parseInt(e.target.value) < 0){
          e.target.value = 0
        }
        else{
          e.target.value = parseInt(e.target.value)
        }
      }
    },
    // 清空表格设置
    clearSettingData(){
      if(!this.settingId) return
      deletTableConfig(this.settingId).then(res=>{
        if (res.success === 1) {
            this.$message({
              message: res.msg === '' ? '操作成功' : res.msg,
              type: 'success'
            })
            this.$emit('clear')
            this.closeDialog()
          }
      })

    },
    // 更新表格设置
    alterSet() {
      this.tableSetting.forEach(item => {
        if(parseInt(item.width) < 0){
          item.width = '0'
        }
      })
      const tData = JSON.stringify(this.tableSetting, function(key, val) {
        if (typeof val === 'function') {
          return val + ''
        }
        return val
      })
      const saveData = { menuCode: this.$route.query.menuCode, sortField: this.sortSelectValue, sortSearch: this.sortSearchValue, sortMethod: this.sortMethodValue, tabIndex: this.tabIndex, content: tData }
      if (this.settingId === '') {
        addTableConfig(saveData).then(res => {
          if (res.success === 1) {
            this.$message({
              message: res.msg === '' ? '操作成功' : res.msg,
              type: 'success'
            })
            this.$emit('update-setid')
            this.$emit('update-table', this.tableSetting)
            this.$emit('update:sortSearch', this.sortSearchValue)
            this.closeDialog()
          }
        })
      } else {
        saveTableConfig(saveData, this.settingId).then(res => {
          if (res.success === 1) {
            this.$message({
              message: res.msg === '' ? '操作成功' : res.msg,
              type: 'success'
            })
            // console.log('this.tableSetting', this.tableSetting)
            this.$emit('update-table', this.tableSetting)
            this.$emit('update:sortSearch', this.sortSearchValue)
            this.closeDialog()
          }
        })
      }
    },
    // 遍历索引
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    // 获取当前行索引
    getSelect(row) {
      this.selectIndex = row.index
    },
    // 交换数组元素
    swapItems(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      this.selectIndex = index2
      return arr
    },
    // 上移
    sortUp(arr) {
      if (this.selectIndex === false) {
        this.$message({
          message: '请先选择需要排序的行',
          type: 'warning'
        })
      } else {
        if (this.selectIndex <= 0) {
          return
        }
        this.swapItems(arr, this.selectIndex, this.selectIndex - 1)
      }
    },
    // 下移
    sortDown(arr) {
      if (this.selectIndex === false) {
        this.$message({
          message: '请先选择需要排序的行',
          type: 'warning'
        })
      } else {
        if (this.selectIndex >= arr.length - 1) {
          return
        }
        this.swapItems(arr, this.selectIndex, this.selectIndex + 1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../../theme/qup-theme";
.sort-control-box{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  text-align: right;

  .title{
    font-size: 12px;
    margin-right: 2px;
    font-weight: 600;
  }
  /deep/ .el-input__inner{
    border-color: $qup-table-border;
  }
}
.table-list-box{
  margin-top: 0;

  .table-scrollbar{
    position: relative;
    height: 100px;

    /deep/ .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }

  /deep/ .el-input--mini .el-input__inner{
    border-radius: 0;
    padding: 0 0 0 5px !important;
  }

  /deep/ .el-table .cell{
    padding-right: 0 !important;
  }
}
.table-set-dlg{
  .el-button--primary {
    color: #FFF;
    background-color: $qup-color-primary ;
    border-color: $qup-color-primary ;
  }
  
  /deep/ .el-input.is-focus .el-input__inner{
    border-color: $qup-color-primary !important;
  }

  /deep/ .el-input__inner:focus{
    border-color: $qup-color-primary !important;
  }
  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: $qup-color-primary;
    border-color:$qup-color-primary;
  }
  /deep/ .el-checkbox__inner:hover{
    border-color:$qup-color-primary;
  }
}
.readonly-input{
  background:transparent !important;
  border: 0 !important;
  /deep/ .el-input__inner{
    background:transparent !important;
    border: 0 !important;
  }
}
</style>

